<template>
  <table border="1px">
    <tr>
      <td>医院名称</td>
      <td>医院简介</td>
      <td>医院地址</td>
      <td>医院图片</td>
    </tr>
    <tr>
      <td>{{ hospitalobj.name }}</td>
      <td>{{ hospitalobj.description }}</td>
      <td>{{ hospitalobj.address }}</td>
      <td><img :src="hospitalobj.image"></td>
    </tr>
  </table>
  <h1>相关医生</h1>
  <el-table :data="doctorlist" style="width: 100%">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="department_name" label="科室名" />
    <el-table-column prop="description" label="简介" />
    <el-table-column prop="specialty" label="专长" />
    <el-table-column label="头像">
      <template #default="scope">
        <img :src="scope.row.doctor_avatar">
      </template>
    </el-table-column>
    <el-table-column label="查看">
      <template #default="scope">
        <el-button type="primary" @click="router.push({path: '/doctor_detail', query: {id: scope.row.id}})">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let hospitalobj = ref({})

  let doctorlist = ref([])

  const gethospitalobj=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/hospitalRetrieve/${id}/`)
    .then(res=>{
      console.log(res)
      hospitalobj.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getdoctorlist=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/doctorHospitalList/?hospital=${id}`)
    .then(res=>{
      console.log(res)
      doctorlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    gethospitalobj()
    getdoctorlist()
  })

</script>
